<template>
  <div class="navbar">
    <div class="navbar-content">
      <div class="logo" @click="handleGoPath('/')">
        <img src="@/static/img/logo.png" alt="" />
      </div>
      <div
        class="navbar-toggle"
        :class="isClose ? 'active' : ''"
        @click="handleClose"
      >
        <span class="menu-icon1"></span>
        <span class="menu-icon2"></span>
        <span class="menu-icon3"></span>
      </div>
      <div class="nav">
        <div class="nav-content">
          <Transition>
            <menu-list
              v-show="!isSearch"
              :navbarList="navbarList"
              v-if="isGoBack"
            ></menu-list>
          </Transition>
          <Transition>
            <nav-search v-show="isSearch"></nav-search>
          </Transition>
        </div>
        <div class="personal" v-if="isLogin">
          <ul>
            <li>
              <div>
                <img
                  @click="handleGoPath('/set')"
                  :src="
                    userInfo.avatar
                      ? userInfo.imgHost+userInfo.avatar
                      : require('@/static/UserAvatar.png')
                  "
                  alt=""
                />
                <span @click="handleGoPath('/set')">{{
                  userInfo.nickname
                }}</span>
                <span class="iconfont icon-fangxiangxia"></span>
              </div>
              <ul>
                <li @click="handleGoPath('/presonl')">个人中心</li>
                <li @click="handleGoPath('/set/messages')">我的私信</li>
                <li @click="handleGoPath('/set/notifications')">系统通知</li>
                <li @click="handleGoPath('/set')">账号设置</li>
                <li @click="handleLogout">退出登录</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="login" v-else>
          <span @click="handleGoPath('/login')">登录</span>
          <span style="color: #000; cursor: default">|</span>
          <span>注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import MenuList from "./menu/MenuList.vue";
import NavSearch from "./menu/NavSearch.vue";
export default {
  name: "NavBar",
  components: { MenuList, NavSearch },
  props: {
    navbarList: Array,
  },
  data() {
    return {
      isLogin: false,
    };
  },
  computed: {
    ...mapState(["isSearch", "isClose", "isGoBack", "userInfo"]),
  },
  watch:{
    userInfo(){
      this.isLogin = this.userInfo.id ? true : false;
    }
  },
  created() {
    this.isLogin = this.userInfo.id ? true : false;
  },
  methods: {
    ...mapMutations(["handleClose","setUserInfo"]),
    handleGoPath(path) {
      this.$router.push(path);
    },
    handleLogout() {
      this.setUserInfo({value:{},app:this})
      this.isLogin=false;
      this.$router.go(0);
    },
  },
};
</script>

<style lang="less" scoped>
@media only screen and (min-width: 1240px) {
  .navbar-content {
    width: 1200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1240px) {
  .navbar-content {
    width: 970px;
  }
}
@media only screen and (max-width: 992px) {
  .navbar-content {
    width: 750px;
    .nav {
      display: none !important;
    }
    .navbar-toggle {
      display: block !important;
    }
  }
}
@media only screen and (max-width: 768px) {
  .navbar-content {
    width: 100%;
    .logo {
      img {
        height: 26px !important;
      }
    }
  }
}
.navbar {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  box-sizing: border-box;
  .navbar-content {
    margin: 0 auto;
    // height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    .logo {
      cursor: pointer;
      img {
        height: 40px;
      }
    }
    .nav {
      flex: 1;
      display: flex;
      position: relative;
      justify-content: space-between;
      margin-left: 40px;
      .nav-content {
        width: 100%;
        height: 64px;
        position: relative;
      }
      .login {
        width: 104px;
        font-size: 14px;
        display: flex;
        align-items: center;
        cursor: pointer;
        span {
          margin-left: 10px;
          &:hover {
            color: #3361ea;
          }
        }
      }
      .personal {
        ul {
          li {
            position: relative;
            font-size: 14px;
            div {
              display: flex;
              height: 64px;
              align-items: center;
              img {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                margin: 5px;
                display: inline-block;
                cursor: pointer;
              }
              span {
                cursor: pointer;
                &:nth-of-type(1) {
                  font-size: 13px;
                  max-width: 120px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
            &:hover {
              color: #3361ea;
              > ul {
                transform: rotateX(0);
              }
              span {
                transform: rotate(-180deg);
                &:nth-of-type(1) {
                  transform: rotate(0);
                }
              }
            }
            ul {
              position: absolute;
              min-width: 120px;
              flex-direction: column;
              margin-left: -14px;
              // margin-top: -1px;
              box-sizing: border-box;
              box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
              transition: transform 0.3s;
              transform: rotateX(-90deg);
              transform-origin: 0 0;
              cursor: pointer;
              &::before {
                content: "";
                border-top: 1px solid rgba(235, 235, 235, 0.589);
                border-left: 1px solid rgba(235, 235, 235, 0.589);
                position: absolute;
                left: 35%;
                top: -6px;
                display: block;
                width: 10px;
                height: 10px;
                transform: rotate(45deg);
                background: #fff;
              }
              li {
                line-height: 32px;
                color: #000;
                padding: 0 14px;
                background: #fff;
                &:hover {
                  color: #fff;
                  background: #1162e8;
                }
              }
            }
          }
        }
      }
    }
    .navbar-toggle {
      display: none;
      position: relative;
      width: 20px;
      height: 20px;
      padding-right: 30px;
      box-sizing: border-box;
      span {
        display: block;
        width: 20px;
        height: 2px;
        background: #000;
        transition: transform 0.5s;
      }
      .menu-icon2 {
        margin-top: 5px;
      }
      .menu-icon3 {
        margin-top: 5px;
      }
    }
    .navbar-toggle.active {
      span {
        position: absolute;
        top: 10px;
        margin: 0;
      }
      .menu-icon1 {
        transform: rotate(45deg);
      }
      .menu-icon2 {
        display: none;
      }
      .menu-icon3 {
        transform: rotate(-45deg);
      }
    }
  }
}
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>